Hi all ,i'm a beginner at CSS and trying to do a NETTUTS , but there's a portion in the webpage that i don't know what exactly to do in CSS to make it look right ...

I just can't get this input text boxes, textarea and the button to be aligned like that , and to be honest the tutor isn't doing a great job to clearing stuff out

Using alternative and absolute positioning, and setting top and right spacing is kinda no a good idea i think ... I'm trying to align them using FlexBox feature but don't know why those elements are not moving at all ...

Here's my HTML & CSS3 code (for chrome) :

<section id="getAfreeQuote">
<h2>GET A FREE QUOTE</h2>
<form method="post" action="#">
    <input type="text" name="yourName" placeholder="YOUR NAME"/>
    <input type="email" name="yourEmail" placeholder="YOUR EMAIL"/>
    <textarea name="projectDetails" placeholder="YOUR PROJECT DETAILS."></textarea>
    <input type="text" name="timeScale" placeholder="YOUR TIMESCALE"/>
    <button>Submit</button>
</form>

#getAfreeQuote form {
 display:-webkit-box;
 -webkit-box-orient:vertical;
    height:500px;
}

 #getAfreeQuote input[name="yourName"]{
-webkit-box-ordinal-group:1;
 }

 #getAfreeQuote input[name="yourEmail"]{
-webkit-box-ordinal-group:1;
 }

 #getAfreeQuote textarea{
-webkit-box-ordinal-group:2;
 }

 #getAfreeQuote input[name="timeScale"]{
-webkit-box-ordinal-group:3;    
 }

 #getAfreeQuote button {
-webkit-box-ordinal-group:4;    
 }

and the result :